<template>
  <div class="d-flex flex-column">
    <ol class="breadcrumb bg-no mb-0">
      <li class="breadcrumb-item">系统管理</li>
      <li class="breadcrumb-item">角色管理</li>
    </ol>
    <div class="row no-gutters flex-grow">
      <div class="col-md-3">
        <div class="bg-white h-100 mx-3 p-3 shadowed">
          <div class="input-holder b-ddd rad-3"><i class="ti-search"></i>
            <input name="keyword" v-model.trim="keyword" class="form-control" placeholder="过滤角色">
          </div>
          <div class="mt-3 px-3 bb-eee">角色列表</div>
          <div class="list-group stateful no-border mt-2">
            <router-link :to="'/roles/' + item.id" class="list-group-item" active-class="status-primary" :title="item.description" v-for="item in filtered" :key="item.id">
              <i class="ti-user mr-2"></i> {{item.name}}
            </router-link>
          </div>

          <role-menu dropup="true" initial="add" @add="add"></role-menu>
        </div>
      </div>

      <div class="col-md-9 mt-3 mt-md-0">
        <div class="bg-white h-100 mx-3 ml-md-0 shadowed">
          <div class="d-flex justify-content-between align-items-center p-4 text-theme-dark">
            <div class="font-xl" v-if="role">{{role.name}} <span class="text-muted" v-if="role.description">({{role.description}})</span></div>
            <div class="font-xl text-muted" v-else>没有角色被选中</div>
            <div class="font-sm" v-if="role">
              <a class="ml-3 text-link" @click="save"><i class="ti-upload"></i> 保存更改</a>
              <role-menu class="ml-3" direction="right" name="更多" :role="role" @edit="edit" @del="del"></role-menu>
            </div>
          </div>
          <div class="bt-eee p-3">
            <treeview :treenodes="perms" :checked="checked"></treeview>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {Role, Permission} from '../../resources'
  import treeview from '../../widgets/treeview.vue'
  import RoleMenu from './role-menu.vue'
  import toastr from 'toastr'

  export default {
    data: () => ({
      loading: false, // 列表加载指示
      keyword: '',    // 搜索关键字
      checked: [],    // 当前激活角色已包含的权限
      roles: [],      // 所有角色
      perms: [],      // 权限树
      role: ''       // 当前激活角色
    }),
    beforeRouteEnter(to, from, next) {
      Promise.all([Role.all(), Permission.tree()]).then(([roles, perms]) => {
        next(vm => {
          vm.roles = roles.data
          vm.perms = perms.data
          if (to.params.id) {
            vm.role = vm.roles.find(r => r.id == to.params.id)
          }
          vm.$nextTick(() => {
            vm.$emit('loaded')
            vm.loading = false
          })
        })
      })
    },
    beforeRouteUpdate(to, from, next) {
      if (to.params.id) {
        this.role = this.roles.find(r => r.id == to.params.id)
      }
      Role.owns(to.params.id).then(response => {
        this.checked = response.data
        this.$emit('loaded')
        next()
      })
    },
    methods: {
      save () { // 保存权限改动

      },
      add (role) {  // 角色添加成功回调
        this.roles.unshift(role)
      },
      edit (role) {
        var index = this.roles.findIndex(r => r.id == role.id)  // 找到元素坐标
        this.roles.splice(index, 1, role) // 替换元素
        this.role = role  // 替换当前角色
      },
      del (role) {  // 角色删除回调
        this.roles = this.roles.filter(r => r.id !== role.id)   // 从角色列表移除角色
        this.role = null  // 置空当前角色
      }
    },
    computed: {
      filtered () {
        return Object.keys(this.roles).map(k => this.roles[k]).filter(r => {
          return r.name.indexOf(this.keyword) !== -1
        })
      }
    },
    components: {RoleMenu, treeview}
  }
</script>